<template>
  <div class="app-container report-order">
    <!-- <main-title title="FBM报表" /> -->
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
      <div>
        <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </form-selections>
    <div class="select_flex">
      <div class="operation_button_box">
        <el-button v-action="'reportOrder@exportFBM'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div>
      <div>
        <!-- <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button> -->
      </div>
    </div>
    <div v-loading="loading">
      <el-table :data="data" border fit :max-height="screenHeigh" @selection-change="handleSelectMulti">
        <el-table-column label="下单时间" prop="created_at" align="center" width="188">
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="order_no" align="center" min-width="161" />
        <el-table-column label="平台订单编号" prop="platform_no" align="center" width="137" />
        <el-table-column label="T/N" align="center" width="101">
          <template slot-scope="scope">
            <template v-if="scope.row.shippingCodeList.length > 0">
              <div v-for="(item, index) in scope.row.shippingCodeList" :key="index">{{ item }}</div>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="物流公司" align="center" width="97">
          <template slot-scope="scope">
            <template v-if="scope.row.shippingCompanyList.length > 0">
              <div v-for="(item, index) in scope.row.shippingCompanyList" :key="index">{{ item }}</div>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="店铺" prop="shop_name" align="center" width="95" />
        <el-table-column label="平台" prop="platform_name" align="center" width="77" />
        <el-table-column label="平台SKU" prop="platform_sku" align="center" width="104" />
        <el-table-column label="系统SKU" prop="product_sku" align="center" width="180" />
        <el-table-column label="SKU中文名称" prop="product_name" align="center" width="185" show-overflow-tooltip />
        <el-table-column label="产品类别" prop="category_name" align="center" width="150" show-overflow-tooltip />
        <el-table-column label="数量" prop="quantity" align="center" width="64" />
        <el-table-column label="销售金额" prop="price_amount" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="accMul(scope.row.price_amount, scope.row.quantity)" />
          </template>
        </el-table-column>
        <el-table-column label="税费" prop="tax_amount" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="accMul(scope.row.tax_amount, scope.row.quantity)" />
          </template>
        </el-table-column>
        <el-table-column label="采购基准价" prop="purchase_amount" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="(scope.row.purchase_amount * scope.row.quantity)" />
          </template>
        </el-table-column>
        <el-table-column label="海运费" prop="freight_fee" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="scope.row.freight_fee" />
          </template>
        </el-table-column>
        <el-table-column label="关税" prop="tariff_fee" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="scope.row.tariff_fee" />
          </template>
        </el-table-column>
        <el-table-column label="订单处理费" prop="order_operation_fee" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="scope.row.order_operation_fee" />
          </template>
        </el-table-column>
        <el-table-column label="仓储费" prop="storage_fee" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="scope.row.storage_fee*scope.row.quantity" />
          </template>
        </el-table-column>
        <el-table-column label="快递费" prop="express_fee" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="scope.row.express_fee" />
          </template>
        </el-table-column>
        <!-- 仓储费 storage_fee -->
        <!-- <el-table-column label="快递增值附加费" prop="express_surcharge_fee" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="scope.row.express_surcharge_fee" />
          </template>
        </el-table-column> -->
        <el-table-column label="售后类型" prop="type" align="center" width="112" />
        <el-table-column label="售后产生费用" prop="amount" align="center" width="112">
          <template slot-scope="scope">
            <app-price :price="scope.row.amount" />
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" align="center" width="112" show-overflow-tooltip />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="报表导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import report from '../mixins/index'
import DownModul from '@/components/DownModul/index.vue'
import { action } from '@/directive/permission/index.js'
import cacheList from '@/layout/mixin/cacheList'
import { accMul } from '@/utils/index'
export default {
  name: 'ReportOrderFBM',
  components: { DownModul },
  directives: {
    action
  },
  mixins: [report, cacheList],
  data() {
    return {
      otherHeight: 355,
      url: '/reportOrder/fbm', // 接口路径
      componentName: 'ReportOrderFBM',
      exportUrl: '/reportOrder/export/fbm',
      formItems: [
        {
          label: '关键字',
          key: 'key',
          type: 'input',
          placeholder: '请输入订单编号/店铺名称'
        },
        {
          label: '平台订单编码',
          key: 'platform_no',
          type: 'input',
          placeholder: '请输入平台订单编码'
        },
        {
          label: '平台SKU',
          key: 'platform_sku',
          type: 'input',
          placeholder: '请输入平台SKU'
        },
        {
          label: '系统SKU',
          key: 'product_sku',
          type: 'input',
          placeholder: '请输入系统SKU'
        },
        {
          label: '创建时间',
          key: 'date',
          type: '',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
          //   wrap: true
        }
      ],
      optionsModul: [
        {
          key: 'created_at',
          label: '下单时间'
        },
        {
          key: 'order_no',
          label: '订单编号'
        },
        {
          key: 'platform_no',
          label: '平台订单编号'
        },
        {
          key: 'shipping_code',
          label: 'T/N'
        },
        {
          key: 'shipping_company',
          label: '物流公司'
        },
        {
          key: 'shop_name',
          label: '店铺'
        },
        {
          key: 'platform_name',
          label: '平台'
        },
        {
          key: 'platform_sku',
          label: '平台SKU'
        },
        {
          key: 'product_sku',
          label: '系统SKU'
        },
        {
          key: 'product_name',
          label: 'SKU中文名称'
        },
        {
          key: 'category_name',
          label: '产品类别'
        },
        {
          key: 'quantity',
          label: '数量'
        },
        {
          key: 'price_amount',
          label: '销售金额'
        },
        {
          key: 'tax_amount',
          label: '税费'
        },
        {
          key: 'purchase_amount',
          label: '采购基准价'
        },
        {
          key: 'freight_fee',
          label: '海运费'
        },
        {
          key: 'tariff_fee',
          label: '关税'
        },
        {
          key: 'order_operation_fee',
          label: '订单处理费'
        },
        {
          key: 'storage_fee',
          label: '仓储费'
        },
        {
          key: 'express_fee',
          label: '快递费'
        },
        // {
        //   key: 'express_surcharge_fee',
        //   label: '快递增值附加费'
        // },
        {
          key: 'type',
          label: '售后类型'
        },
        {
          key: 'amount',
          label: '售后产生费用'
        },
        {
          key: 'remark',
          label: '备注'
        }
      ]
    }
  },
  created() { },
  methods: {
    accMul(a, b) {
      return accMul(a, b)
    },
    beforeSearch() {
      if (this.queryParam.date?.length > 0) {
        const [start_at, end_at] = this.queryParam.date
        this.queryParam['start_at'] = start_at
        this.queryParam['end_at'] = end_at
      } else {
        this.queryParam['start_at'] = ''
        this.queryParam['end_at'] = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.report-order .filter-container {
  border: none;
  padding-bottom: 0;
}
</style>
